<template>
  <view class="container">
    <view class="main">
      <schedule class="schedule" v-if="tabIndex == 0" />
      <circle style="width: 100%; height: 100%" v-if="tabIndex == 1" />
      <my style="width: 100%" v-if="tabIndex == 2" />
    </view>
    <ty-tab style="width: 100%" :tab-index.sync="tabIndex">
      <ty-tab-item name="番茄钟" style="width: 100%">
        <i class="iconfont">&#xe600;</i>
      </ty-tab-item>
      <ty-tab-item name="圈子" style="width: 100%">
        <i class="iconfont">&#xe62e;</i>
      </ty-tab-item>
      <ty-tab-item name="我的" style="width: 100%">
        <i class="iconfont">&#xe642;</i>
      </ty-tab-item>
    </ty-tab>
  </view>
</template>

<script>
import tyTab from "../../components/Tab";
import tyTabItem from "../../components/TabItem";
import Schedule from "./schedule/index";
import Circle from "./circle/index";
import My from './my/index';
export default {
  name: "tab",
  beforeCreate() {
    wx.hideHomeButton();
  },
  data() {
    return {
      tabIndex: 1,
    };
  },
  components: {
    tyTab,
    tyTabItem,
    Schedule,
    Circle,
    My,
  },
};
</script>

<style scoped>
.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  background: #f8f8f8;
}
.container > .main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
  overflow-x: hidden;
}
.container > .main > .schedule {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
</style>